<template>
  <div class="home">
    <div class="header">
      <h1>广告位火热招商中</h1>
    </div>
    <div class="main">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
       <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
    <div class="footer">
      <ul>
        <li><router-link to="/home1/index">首页</router-link></li>
        <li><router-link to="/home1/shoucang">收藏</router-link></li>
        <li><router-link to="/favorite">喜欢</router-link></li>
        <li><router-link to="/home1/my">我的</router-link></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {};
  },
  created() {},
  mounted() {
    // console.log(this.$route.meta,111);
    // console.log(this.$route.props,111);
    // console.log(this)
  },
  computed: {},
  methods: {},
};
</script>
<style lang='less'  scoped>
.router-link-exact-active {
  background: linear-gradient(
    135deg,
    red,
    orange,
    yellow,
    rgb(4, 252, 4),
    rgb(0, 183, 255),
    rgb(232, 7, 253),
    rgb(238, 6, 238)
  );
}

.home {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
   background: linear-gradient(
    135deg,
    red,
    orange,
    yellow,
    rgba(4, 252, 4,0.2),
    rgba(0, 183, 255,0.2),
    rgba(232, 7, 253,0.2),
    rgba(238, 6, 238,0.2)
  );
  .header {
    text-align: center;
    line-height: 50px;
    height: 50px;
    color: rgb(19, 17, 18);
    text-shadow: 30px 30px 30px rgba(79, 139, 1, 0.5);
    background: linear-gradient(
      90deg,
      rgba(255, 64, 64, 0.8) 0%,
      rgba(255, 215, 0, 0.6) 50%,
      rgba(0, 255, 0, 0.4) 100%
    );
  }
  .main {
    overflow: scroll;
    flex: 1;
  }
  ul {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    background: linear-gradient(
      90deg,
      rgba(255, 64, 64, 1) 0%,
      rgba(255, 215, 0, 1) 50%,
      rgba(0, 255, 0, 1) 100%
    );
    li {
      text-align: center;
      width: 100px;
      a {
        display: block;
        width: 100%;
        height: 50px;
        text-decoration: none;
        line-height: 50px;
      }
    }
  }
}
</style>
